<template>
  <div class="device-edit">
     <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="13">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model.trim="ruleForm.deviceName" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="IP地址" prop="ip">
              <el-input v-model.trim="ruleForm.ip" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="端口" prop="port">
              <el-input v-model.trim="ruleForm.port" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="归属门店" prop="storeId">
              <el-select v-model="ruleForm.storeId" placeholder="请选择" style="width:100%" size="mini" clearable :disabled="disabled">
                <el-option
                  v-for="item in shopArr"
                  :key="item.id"
                  :label="item.storeName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="所在区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择" style="width:100%" size="mini" clearable :disabled="disabled">
                <el-option
                  v-for="item in regionArr"
                  :key="item.dicCode"
                  :label="item.dicName"
                  :value="item.dicCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="设备账号" prop="userName">
              <el-input v-model.trim="ruleForm.userName" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="密码" prop="userPassword">
              <el-input v-model.trim="ruleForm.userPassword" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div class="edit-footer">
      <el-button @click="confirmDialog" type="primary" :disabled="disabled">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'device-edit',
  data () {
    return {
      ruleForm: {
        deviceName: '',
        ip: '',
        storeId: '',
        region: '',
        userName: '',
        userPassword: ''
      },
      rules: {
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      },
      disabled: false,
      shopArr: [],
      regionArr: [
        {dicCode: 1, dicName: '私教区'}, 
        {dicCode: 0, dicName: '自由区'}
      ]
    }
  },
  created () {
    this.getShops()
    if (this.$route.query.action == 'view') {
      this.disabled = true
    }
    if (this.$route.query.action == 'edit') {
      var rowData = JSON.parse(sessionStorage.getItem('device'))
      // console.log(rowData)
      this.$set(this.ruleForm, 'deviceName', rowData.deviceName)
      this.$set(this.ruleForm, 'ip', rowData.ip)
      this.$set(this.ruleForm, 'port', rowData.port)
      this.$set(this.ruleForm, 'storeId', rowData.storeId)
      this.$set(this.ruleForm, 'region', rowData.region)
      this.$set(this.ruleForm, 'userName', rowData.userName)
      this.$set(this.ruleForm, 'userPassword', rowData.userPassword)
    }
  },
  methods: {
    // 获取店铺
    getShops () {
      this.$store.dispatch('manage/StoreListMy', '').then(res => {
        if (res.code == '200') {
          var data = res.data
          this.shopArr = data
        }
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.closeTagTo('/home/device')
    },
    // 确认
    confirmDialog () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params = {
            deviceName: this.ruleForm.deviceName,
            id: this.$route.query.action == 'add' ? '' : this.$route.query.id,
            ip: this.ruleForm.ip,
            port: this.ruleForm.port,
            region: this.ruleForm.region,
            storeId: this.ruleForm.storeId,
            userName: this.ruleForm.userName,
            userPassword: this.ruleForm.userPassword
          }
          this.dialogLoading = true
          var url = this.$route.query.action == 'add' ? 'manage/DeviceAdd' : 'manage/DeviceEdit'
          this.$store.dispatch(url, params).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.closeDialog()
            } else {
              this.$message({ message: res.msg, duration: 2000, type: 'error' })
            }
            this.dialogLoading = false
          }).catch(err => {
            this.$message({ message: err.msg, duration: 2000, type: 'error' })
            this.dialogLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.device-edit {
  padding: 15px !important;
  position: relative;
  background: #fff;
  .btn-list {
    float: right;
    margin-right: 10px;
    font-size: 12px;
    color: #409EFF;
    cursor: pointer;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .fix-lh {
    line-height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  .left{
    min-height:500px;
    background:#fff;
  }
  .left-tree{
    width: 100%;
    min-height:600px;
    overflow: auto;
  }
  .left-top{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    background: #e2e2e2;
    font-size: 15px;
  }
  .box-card{
    margin-bottom: 10px;
  }
  .avtar-wrap{
    padding: 10px 30px 30px;
    .avtar-item{
      width: 200px;
      margin: 0 auto 50px;
      p{
        line-height: 26px;
        color: #bbb;
      }
      .avtar-img{
        width: 200px;
        height: 200px;
      }
      .avtar-tip{
        color: #555;
      }
    }
  }
  .edit-footer{
    width: calc(100% - 240px);
    height: 60px;
    line-height: 60px;
    position: fixed;
    background: #fff;
    left: 230px;
    bottom: 0;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .edit-wrap{
    height: 410px;
    .ql-snow .ql-picker{
      line-height: 24px;
    }
    .ql-container{
      white-space:pre-wrap;
    }
  }
  .quill-editor{
    width: 100%;
    height: 360px;
  }
}
</style>
